<!DOCTYPE html>

<html>
<head>
    <title>Local</title>
    <script src="http://j.maxmind.com/app/geoip.js"></script>
    <!--<script src="http://maps.google.com/maps/api/js?sensor=false"></script>-->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
    <script type="text/javascript">




        var map;
        var myPos;
        var directionsRenderer;
        var directionsService = new google.maps.DirectionsService();

        if (navigator && navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(geoOK, geoKO);
        } else {
            geoMaxmind();
        }
        function geoOK(position) {
            showMap(position.coords.latitude, position.coords.longitude);
        }
        function geoMaxmind() {
            showMap(geoip_latitude(), geoip_longitude());
        }

        function geoKO(err) {
            if (err.code == 1) {
                error('El usuario ha denegado el permiso para obtener informacion de ubicacion.');
            } else if (err.code == 2) {
                error('Tu ubicacion no se puede determinar.');
            } else if (err.code == 3) {
                error('TimeOut.')
            } else {
                error('No sabemos que pasó pero ocurrio un error.');
            }
        }

        function showMap(lat, longi) {

            myPos = new google.maps.LatLng(lat, longi);

            var myOptions = {
                zoom: 13,
                center: myPos,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
            }

            destino = "19.452523,-70.705599";
            directionsService = new google.maps.DirectionsService();
            // opciones de busqueda
            var request = {
                origin: myPos,
                destination: destino,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            directionsService.route(request, getRuta);


            map = new google.maps.Map(document.getElementById("mapa"), myOptions);

            //posicion
            var latlng = new google.maps.LatLng(19.452503, -70.705599);
            var marker = new google.maps.Marker({
            position: latlng,
            title:"Texto descriptivo, Ubicacion de Usuario",
            draggable:true,
            animation: google.maps.Animation.DROP
            });
            
            marker.setMap(map);
            directionsRenderer = new google.maps.DirectionsRenderer();
            directionsRenderer.setMap(map);

            //google.maps.event.addListener(map, 'click', find_closest_marker);

            var treintaDeMarzo = new google.maps.LatLng(19.452523, -70.705599);
            var avelasCarreras = new google.maps.LatLng(19.454392, -70.700222);
            var distance = google.maps.geometry.spherical.computeDistanceBetween(treintaDeMarzo, avelasCarreras);
            
            alert("Distancia: " + Math.round(distance) + " Metros."); //distancia mostrada en metros.
        }

        function travelToAddress() {

            //Obtenemos la direccion
            //destino=document.forms[0].address.value;
            destino = "19.452523,-70.705599"; //variable PuntoMasCercano
            directionsService = new google.maps.DirectionsService();
            // opciones de busqueda
            var request = {
                origin: myPos,
                destination: destino,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            directionsService.route(request, getRuta);
        }

        function getRuta(result, status) {


            if (status == google.maps.DirectionsStatus.OK) {
                directionsRenderer.setDirections(result);
            } else {
                error("Ha ocurrido un error debido a : " + status);
            }
        }

        function error(msg) {
            alert(msg);
        }

        function rad(x) { return x * Math.PI / 180; }
        function find_closest_marker(event) {
            var lat = event.latLng.lat();
            var lng = event.latLng.lng();
            var R = 6371; // radius of earth in km
            var distances = [];
            var closest = -1;
            for (i = 0; i < map.markers.length; i++) {
                var mlat = map.markers[i].position.lat();
                var mlng = map.markers[i].position.lng();
                var dLat = rad(mlat - lat);
                var dLong = rad(mlng - lng);
                var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                    Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong / 2) * Math.sin(dLong / 2);
                var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                var d = R * c;
                distances[i] = d;
                if (closest == -1 || d < distances[closest]) {
                    closest = i;
                }
            }

            alert(map.markers[closest].title);
        }
    </script>
</head>
<body>
    <h1>Mapa</h1>
    <form>
    </form>
    <div id="mapa" style="height: 450px"></div>


</body>
</html>



